<!--
 @description 自定义导航-导航
 @fileName Navigation.vue
 @author zengqiongying
 @created 2023/09/05 19:15:47
-->
<template>
  <div :class="{'custom-navigation':!isInline}">
    <MineHeader v-if="!isInline" :title="pageTitle" arrow />
    <div v-if="showLevel!==1" class="floor-tabs" :style="{'top':`${isInline?offTop:44}px`,'left':`${offLeft}px`}">
      <div v-if="firstNavList.length>0" class="tab-weight-scoll">
        <Scroll ref="wscroll" horizontal class="scoll-content">
          <!-- 三\四层导航的一级导航 -->
          <div ref="tabs" class="w-tabs">
            <div
              v-for="(item,i) in firstNavList"
              :key="i"
              :class="['w-name',{'active':item.id===firstId}]"
              @click="handleFirstChange(item)"
            >{{ item.tabName }}</div>
          </div>
        </Scroll>
      </div>
      <div class="tab-scoll">
        <!-- 二级导航 -->
        <template v-if="showLevel===4">
          <ScrollTab
            v-if="secondNavList.length>0"
            v-model="secondId"
            :list="secondNavList"
            value-key="id"
            label-key="tabName"
            @change="clickGetThirdHandle"
          />
        </template>
        <template v-else>
          <ScrollTab
            v-if="navList.length>0"
            v-model="tabId"
            :list="navList"
            value-key="id"
            label-key="tabName"
            @change="clickTabHande"
          />
        </template>
      </div>
      <div v-if="showLevel===4" class="tab-scoll no-pt">
        <ScrollTab
          v-if="navList.length>0"
          v-model="tabId"
          :list="navList"
          value-key="id"
          label-key="tabName"
          item-style="text"
          @change="clickTabHande"
        />
      </div>
    </div>
    <div
      v-if="navList.length>0"
      class="page-content"
      :class="{
        'threelevel':showLevel===3,
        'fourlevel':showLevel===4,
        'no-anchor':navList.length===0 || showLevel===1
      }"
    >
      <template v-if="showLevel===1">
        <div class="floor-list">
          <ContentItem
            v-for="(g,i) in navList"
            :key="i"
            :src="g.picUrl"
            :name="g.tabName"
            :column="isInline?3:4"
            @click="clickPictureHandle(g)"
          />
          <van-empty v-if="navList.length===0" />
        </div>
      </template>
      <van-index-bar
        v-else
        slot="list"
        ref="indexBar"
        :sticky-offset-top="stickyOffsetTop"
        :index-list="barIndexList"
        @change="handleBarChange"
      >
        <div v-for="(item,index) in navList" :key="index">
          <van-index-anchor :index="item.id" />
          <div class="floor-group">
            <div class="floor-title">{{ item.tabName }}</div>
            <template v-if="[2,'2'].includes(item.showType)">
              <!-- <SwiperNavContent v-if="item.children && item.children.length>0" :list="item.children" /> -->
              <Scroll v-if="item.children && item.children.length>0" horizontal class="scoll-content">
                <div class="floor-list-scroll">
                  <ContentItem
                    v-for="(g,i) in item.children"
                    :key="i"
                    :src="g.picUrl"
                    :name="g.tabName"
                    is-scroll
                    @click="clickPictureHandle(g)"
                  />
                </div>
              </Scroll>
              <van-empty v-else />
            </template>
            <template v-else>
              <div v-if="item.children && item.children.length>0" class="floor-list">
                <ContentItem
                  v-for="(g,i) in item.children"
                  :key="i"
                  :src="g.picUrl"
                  :name="g.tabName"
                  :column="isInline?3:4"
                  @click="clickPictureHandle(g)"
                />
              </div>
              <van-empty v-else />
            </template>
            <div v-if="index===navList.length-1" class="empty-place" />
          </div>
        </div>
      </van-index-bar>
    </div>
  </div>
</template>

<script>
import MineHeader from '@/components/MineHeader'
import Scroll from '@/components/Scroll'
import ScrollTab from '@/components/ScrollTab'
// import SwiperNavContent from './components/SwiperNavContent'
import ContentItem from './components/NavContentItem'

import { getTabDefineDetail } from '@/apis/defineTab'
import { getTabTree } from '@/apis/index'
export default {
  name: 'DefineTabNavigation',
  components: { MineHeader, Scroll, ScrollTab, ContentItem },
  props: {
    confId: {
      type: String,
      default: ''
    },
    isInline: {
      // 是否内嵌：true 内嵌
      type: Boolean,
      default: false
    },
    offTop: {
      // 距离顶部距离
      type: [Number, String],
      default: 0
    },
    offLeft: {
      // 距离左侧距离
      type: [Number, String],
      default: 0
    }
  },
  data() {
    return {
      defineId: this.$route.params.id, // 类型定义ID
      pageTitle: this.$route.query.title || '', // 页面标题
      showLevel: 0, // 导航层级：1,2,3
      firstNavList: [], // 一级导航(仅三、四层导航使用)
      firstId: '', //
      secondNavList: [], // 二级导航 (仅四层导航使用)
      secondId: '',
      navList: [], // 末级导航数据(二层导航时为1级，三层导航时为2级,四层导航时为3级)
      tabId: '' // 当前Tab导航id (二层导航时为1级ID，三层导航时为2级id)
    }
  },
  computed: {
    firstIndex() {
      if (this.firstNavList.length === 0) return -1
      const index = this.firstNavList.findIndex(v => v.id === this.firstId)
      return index
    },
    list() {
      if (!this.tabId) return []
      const obj = this.navList.find(v => v.id === this.tabId)
      return (obj && obj.children) || []
    },
    barIndexList() {
      return this.navList.map(v => v.id)
    },
    stickyOffsetTop() {
      if (this.showLevel === 4) {
        return this.isInline ? 144 + this.offTop : 188
      } else if (this.showLevel === 3) {
        return this.isInline ? 100 + this.offTop : 144
      } else {
        return this.isInline ? 60 + this.offTop : 100
      }
    }
  },
  watch: {
    confId: {
      handler(val, oldVal) {
        if (this.isInline) {
          this.defineId = val
          this.firstId = ''
          this.tabId = ''
          this.getNavList()
        }
      },
      immediate: true
    },
    firstIndex(v) {
      if (v === -1 || !this.$refs.tabs) return
      const els = this.$refs.tabs.querySelectorAll('.w-name')
      if (els[v]) {
        const left = els[v].offsetLeft
        const top = els[v].offsetTop
        this.$refs.wscroll.scrollTo(left, top)
      }
    }
  },
  created() {
    this.getNavList()
  },
  activated() {

  },
  methods: {
    async getNavList() {
      this.firstNavList = []
      this.navList = []
      if (!this.defineId) return
      await getTabDefineDetail(this.defineId).then(res => {
        const d = res.data || ''
        /* if (d.name) {
          this.pageTitle = d.name
        } */
        if (d && d.id) {
          this.showLevel = Number(d.showLevel)
        }
      })
      getTabTree(this.defineId).then(res => {
        const list = res.data || []
        if (this.showLevel === 3 || this.showLevel === 4) {
          this.firstNavList = list
          if (list.length > 0) {
            this.handleFirstChange(list[0])
          }
        } else {
          this.navList = list
          this.tabId = list[0].id
        }
      })
    },
    handleFirstChange(d) {
      this.firstId = d.id
      if (this.showLevel === 4) {
        // 获取二级导航(仅4层导航可用)
        const twoNav = d.children || []
        this.secondNavList = twoNav
        this.secondId = twoNav.length > 0 ? twoNav[0].id || '' : ''
        const threeNav = twoNav.length > 0 ? twoNav[0].children || [] : []
        this.navList = threeNav
        this.tabId = this.navList.length ? this.navList[0].id : ''
      } else {
        this.navList = d.children || []
        this.tabId = this.navList.length ? this.navList[0].id : ''
      }
    },
    clickPictureHandle(g) {
      g.routerTitle = g.name
      this.$gotoPage(g, this.$router)
    },
    // 获取三级导航
    clickGetThirdHandle(d) {
      this.secondId = d.id
      const threeNav = d.children || []
      this.navList = threeNav
      this.tabId = this.navList.length ? this.navList[0].id : ''
    },
    clickTabHande(d) {
      // this.tabId = d.id
      // this.$refs.indexBar.scrollTo(this.tabId)
      this.$refs.indexBar.scrollTo(d.id)
      // console.log('自定义导航Tab', this.tabId)
    },
    handleBarChange(id) {
      this.tabId = id
      // console.log('自定义导航IndexBar 点击', this.tabId)
    }
  }
}

</script>
<style lang='less' scoped>
.custom-navigation{
  padding-top:44PX;
  padding-bottom: 16px;
}
.empty-place{
  height: calc(100vh - 180px);
}
.floor-tabs{
  position: fixed;
  z-index: 99;
  left: 0;
  right: 0;
  top:44PX;
  // width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  background: #FFFFFF;
  box-shadow: 0px 2px 14px 0px rgba(0,0,0,0.07);
  .tab-weight-scoll{
    padding: 10px 0 3px;
    .scoll-content{
      width:100%;
      height: 30PX;
      box-sizing: border-box;
    }
    .w-tabs{
      white-space: nowrap;
      display:inline-flex;
      align-items: center;
      flex-wrap: nowrap;
      height: 30PX;
    }
    .w-name{
      font-size: 18px;
      color: #999999;
      padding: 0 16px;
      line-height: 30PX;
      height: 30PX;
      position: relative;
      &.active{
        color: #333333;
        font-weight: bold;
        &::before{
          content: '';
          position: absolute;
          left: 16px;
          right: 16px;
          bottom: 0;
          height: 6PX;
          background: linear-gradient(90deg, #00D5C0 0%, #05C4C3 100%);
          border-radius: 3px;
        }
      }
    }
  }
  .tab-scoll{
    padding: 16PX 0 ;
    height: 28PX;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    &.no-pt{
      padding-top: 0;
    }
  }
}

.page-content{
  margin-top:60PX;
  &.threelevel{
    margin-top:104PX;
  }
  &.fourlevel{
    margin-top:148PX;
  }
  &.no-anchor{
    margin-top: 0 !important;
  }
  .floor-group{
    padding-top: 16px;
  }
  .floor-title{
    display: flex;
    align-items: center;
    height: 20px;
    line-height: 20px;
    padding:0 16px;
    font-weight: bold;
    color: #333333;
    font-size: 14px;
    &::before{
      content: '';
      width: 2px;
      height: 13px;
      background: #00C8B4;
      border-radius: 1px;
      margin-right: 4px;
    }
  }
  .floor-list{
    padding:0 11px;
    display: flex;
    flex-wrap: wrap;
  }
  .floor-list-scroll{
    position: relative;
    padding-top: 12px;
    padding-left: 11px;
    flex-wrap:nowrap;
    display: flex;
  }
}
/deep/ .van-index-anchor{
  // display: none;
  height: 1px !important;
  visibility: hidden;
}
/deep/ .van-index-bar__sidebar{
  display: none;
}
</style>
